<template>
  <div id="app">
    <el-button @click="resetDateFilter">清除日期过滤器</el-button>
    <el-button @click="clearFilter">清除所有过滤器</el-button>
    <el-table
      ref="filterTable"
      :data="tableData"
      @filter-change="filterChange"
      style="width: 100%">
      <el-table-column
        prop="timeString"
        label="日期"
        sortable
        width="180"
        column-key="date"
        :filters="[{text: '2016-05-01', value: '2016-05-01'}, {text: '2016-05-02', value: '2016-05-02'}, {text: '2016-05-03', value: '2016-05-03'}, {text: '2016-05-04', value: '2016-05-04'}]"
        :filter-method="filterHandler"
      >
      </el-table-column>
      <el-table-column
        prop="name"
        label="姓名"
        width="180">
      </el-table-column>
      <el-table-column
        prop="amount"
        label="金额"
        :formatter="formatter">
      </el-table-column>
      <el-table-column
        prop="tag"
        label="标签"
        width="100"
        :filters="[{ text: '家', value: '家' }, { text: '公司', value: '公司' }]"
        :filter-method="filterTag"
        filter-placement="bottom-end">
        <template slot-scope="scope">
          <el-tag
            :type="scope.row.tag === '家' ? 'primary' : 'success'"
            disable-transitions>{{scope.row.tag}}</el-tag>
        </template>
      </el-table-column>
    </el-table>
  </div>
</template>

<script>

export default {
  name: 'app',
  data() {
    return {
      tableData: []
    }
  },
  methods: {
    resetDateFilter() {
      this.$refs.filterTable.clearFilter('time');
    },
    clearFilter() {
      this.$refs.filterTable.clearFilter();
    },
    formatter(row, column) {
      return row.amount
    },
    filterTag(value, row) {
      return row.tag === value;
    },
    filterHandler(value, row, column) {
      console.log(row[column.property], value)
      const property = column['property']
      return row[property] === value
    },
    filterChange(filters) {
      console.log(filters)
    },
    async getBillData() {
      let res = await this.$http.get('http://localhost:3000/bill')
      res.data.res.forEach(item => {
        item.time = new Date(item.time*1000)
        item.timeString = item.time.toLocaleDateString()
      })
      this.$data.tableData = res.data.res
      console.log(this.$data.tableData)
    },
    async getCategories() {
      let res = await this.$http.get('http://localhost:3000/categories')
      console.log(res)
    }
  },
  created() {
    this.getBillData()
    this.getCategories()
  }
}
</script>

<style lang="less">
  #app {
    width: 80%;
    margin: 100px auto;
  }
</style>
